<template>
	<view class="main">
	
		<view class="cu-form-group segmentation-line justify-start">
			<view class="title">所在地区</view>
			<pick-regions-async :multiIndexList="multiIndexList" :areaList="areaList"
			 @getRegions="handleGetRegions" @getArea="handleGetArea">
				<view class="select-area-name">{{selectAreaName}}</view>
			</pick-regions-async>
		</view>
	</view>
</template>

<script>
	import pickRegionsAsync from '@/components/pick-regions/pick-regions-async.vue'

	export default {
		data() {
			return {
				Request: this.$api.api,
				Common: this.$common.common,
				addressForm: {
					address_id: '',
					consignee: '',
					mobile: '',
					province: '',
					city: '',
					district: '',
					address: '',
					is_default: '0'
				},
				selectAreaName: '选择省市区',
			
				multiIndexList: [0, 0, 0],

				/* 省市县列表 */
				areaList: new Array(3).fill([])
			}
		},
		components: {
			pickRegionsAsync
		},
		onLoad(option) {

			if (option.id === undefined) {
				/* 保存操作 */
				uni.setNavigationBarTitle({
					title: '新增地址'
				});
				/* 获取省市县信息 （获取第一级parentId=1，2，3的数据）*/
				this.postAreaInfo('0', 0);
			} else {
				this.addressForm.address_id = option.id;
				/* 编辑操作 */
				uni.setNavigationBarTitle({
					title: '编辑地址'
				});
				this.getAddressDetailInfo();
			}
		},
		methods: {
			/* 获取地址详细信息 */
			getAddressDetailInfo() {
				this.Request.postAddressByIdInfo({
						address_id: this.addressForm.address_id,
					})
					.then(res => {
						if (res.status === 1) {
							let temp = res.data.address;

							this.selectAreaName = [];
							this.handleMultiIndexList(temp.province,0,res.data.province);
							this.handleMultiIndexList(temp.city,1,res.data.city);
							this.handleMultiIndexList(temp.district,2,res.data.district);
							this.$set(this.areaList, 0, res.data.province);
							this.$set(this.areaList, 1, res.data.city);
							this.$set(this.areaList, 2, res.data.district);
							this.idArray.push(temp.address_id);
						} else {
							this.Common.promptInfo(res.msg);
						}
					})
					.catch(res => {
						console.log(res);
						this.Common.promptInfo(res.msg);
					});
			},
			
			/* 初始化显示省市县 */
			handleMultiIndexList(id,index,item){
				for (let i = 0; i < item.length; i++) {
					if(item[i].id === id){
						this.$set(this.multiIndexList, index, i);
						this.selectAreaName += item[i].name;
						break;
					}
				}
      },
      
			/* 获取省市县信息 
			id：
			level：获取等级
			*/
			postAreaInfo(id, level) {
				if (level >= 3) return;
				this.Request.postAreaInfo({
						loginCheck: 1,
						id: id,
						fromType: 'wx'
					})
					.then(res => {
						if (res.status === 1) {
							/* 区分是到底是省市县哪级 */
							if (res.data.length !== 0) {
								this.$set(this.areaList, level, res.data);
								this.postAreaInfo(res.data[0].id, level + 1);
							}
						}
					})
					.catch(res => {
						console.log(res);
					});
			},

			/* 获取某一级地区信息 */
			handleGetArea(col, row) {
				/* 遍历获取 */
				let id = this.areaList[col][row].id;
				if (col === 0) {
					/* 清空 1 2 级数据 */
					this.$set(this.areaList, 1, []);
					this.$set(this.areaList, 2, []);

					this.$set(this.multiIndexList, 1, 0);
					this.$set(this.multiIndexList, 2, 0);
				} else if (col === 1) {
					/* 清空 2 级数据 */
					this.$set(this.areaList, 2, []);
					this.$set(this.multiIndexList, 2, 0);
				}

				this.postAreaInfo(id, col + 1);
			},

			// 获取选择的地区
			handleGetRegions(regionsList) {
				this.addressForm.province = '';
				this.addressForm.city = '';
				this.addressForm.district = '';
				this.selectAreaName = '';
				for (let j = 0; j < this.areaList.length; j++) {
					if (this.areaList[j].length !== 0) {
						console.log(this.areaList[j][regionsList[j]].id, this.areaList[j][regionsList[j]].name);
						/* 0省1 市 2 县 */
						if (j == 0) {
							this.addressForm.province = this.areaList[j][regionsList[j]].id;
						}
						if (j == 1) {
							this.addressForm.city = this.areaList[j][regionsList[j]].id;
						}
						if (j === 2) {
							this.addressForm.district = this.areaList[j][regionsList[j]].id;
						}
						this.selectAreaName += this.areaList[j][regionsList[j]].name;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	/* TODO :到时候重构好后删除下面这个盒模型的设置(由于之前设计人员没有使用，到时候删除原有的graceUI组件) */
	view,
	scroll-view,
	swiper,
	button,
	input,
	textarea,
	label,
	navigator,
	image {
		box-sizing: border-box;
	}

	.main {

		.cu-form-group .title {
			color: #332019;
		}

		.select-area-name {
			display: inline-block;
			overflow: hidden;
			width: 450rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 28rpx;
			color: #988F8C;
		}

		.justify-start {
			justify-content: start;
		}

		.posit {
			position: fixed;
			bottom: 32rpx;
			width: 100%;
			padding: 0 32rpx;

			.cu-btn {
				height: 88rpx;
				// background: linear-gradient(90deg, rgba(248, 168, 138, 1) 0%, rgba(243, 109, 60, 1) 100%);
				background-color: #0875F6;
				color: #fff;
			}
		}
	}

	.cu-form-group {
		border-top-width: 0;
	}

	.cu-form-group uni-picker::after {
		top: -30rpx;
	}

	.cu-form-group picker::after {
		top: -28rpx;
	}

	.cu-list.menu>.cu-item.arrow {
		padding-right: 66rpx;
	}
</style>
